<template>
    <div class="sdy-grid">
        <van-swipe class="my-swipe box" indicator-color="red">
            <van-swipe-item>
                <van-grid :border="false" :column-num="5" :gutter="1">
                    <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img"
                        :text="item.title" />
                </van-grid>
            </van-swipe-item>
            <van-swipe-item>
                <van-grid :border="false" :column-num="5" :gutter="1">
                    <van-grid-item class="grid-item" v-for="items in cateLists" :key="items.id" :icon="items.img"
                        :text="items.title" />
                </van-grid>
            </van-swipe-item>
        </van-swipe>

    </div>
</template>

<script name="sdyGird" lang="ts" setup>
import { reactive } from 'vue'

// 自己准备数据
const list = [
    { id: 1, title: '京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
    { id: 2, title: '数码电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
    { id: 3, title: '京东百货', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png' },
    { id: 4, title: '京东生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
    { id: 5, title: '京东到家', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/97574/40/22764/2060/64a4ff80Fd550d65e/eeea8b95458cc7fd.png' },
    { id: 6, title: '充值中心', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png' },
    { id: 7, title: '附近好店', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png' },
    { id: 8, title: 'PLUS会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' },
    { id: 9, title: '京东国际', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
    { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/186882/8/12149/5894/60ec1250E9335241a/b22054613aa8ae75.png' }
]

const lists = [
    { id: 1, title: '玩3C', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/145692/9/1817/4493/5efbf652E61c4f3ec/722840c121d67fc6.png' },
    { id: 2, title: '沃尔玛', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/185282/10/13877/6658/60ec1404E0fc4061a/a7c213f76e37a8d6.png' },
    { id: 3, title: '美妆馆', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/182378/35/13924/7463/60ec14c6E1f434a60/37fba58239f3547e.png' },
    { id: 4, title: '京东旅行', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191377/35/12864/5624/60ec146cE304517a9/20acb632f59fbbbd.png' },
    { id: 5, title: '拍拍二手', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/36551/10/16098/5792/60ec1589E755822d7/f958b896e706008a.png' },
    { id: 6, title: '全部', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/192665/22/12752/7912/60ec15cbE261a32bf/3ace51badf80e71b.png' },
]

// 准备接口
interface CateInfo {
    id: number,
    title: string,
    img: string,
}

const cateList: CateInfo[] = reactive(list)
const cateLists: CateInfo[] = reactive(lists)


</script>

<style lang="scss" scoped>
.sdy-grid {
    height: 170px;
    box-sizing: border-box;

    >.box {
        height: 100%;
    }
}

.grid-item {
    height: 65px;
    background-color: transparent;
}
</style>